<route lang="json5" type="page">
	{
	layout: 'default',
	style: {
	navigationBarTitleText: '',
	navigationStyle: 'custom',
	disableScroll: true, // 微信禁止页面滚动
	'app-plus': {
	bounce: 'none', // 禁用 iOS 弹性效果
	},
	},
	}
</route>

<template>
	<PageLayout navTitle="编辑资料" backRouteName="userDetail">
		<wd-form style="z-index: 999;" custom-class="pt3" ref="form" :model="model">
			<view class="change-info-box">
				<wd-cell-group border>
					<wd-input label="姓名：" prop="realname" clearable label-width="70px" v-model="model.realname"
						placeholder="请输入姓名" :rules="[{ validator: rules.realname }]" />
					<wd-input label="用户名：" prop="username" clearable label-width="70px" v-model="model.username"
						:readonly="true" placeholder="请输入用户名" />
					<wd-cell title="头像：">
						<avatar v-model="model.avatar"></avatar>
					</wd-cell>
					<view class="pt15px pb15px">
						<wd-select-picker label="性别：" type="radio" v-model="model.sex" :columns="columns" title="请选择性别"
							:safe-area-inset-bottom="false"></wd-select-picker>
					</view>
					<view class="phone">
						<wd-input label="手机号：" prop="phone" clearable label-width="70px" v-model="model.phone"
							placeholder="请输入手机号" :rules="[{ validator: rules.phone }]" />
						<view class="box">
							<view class="num">+86</view>
							<view class="text">中国大陆</view>
						</view>
					</view>
					<wd-input label="邮箱：" prop="email" clearable label-width="70px" v-model="model.email"
						placeholder="请输入邮箱" :rules="[{ validator: rules.email }]" />
				</wd-cell-group>

				<view class="footer p5">
					<wd-button type="primary" size="large" @click="handleSubmit" block>提交</wd-button>
				</view>
			</view>
		</wd-form>
	</PageLayout>
</template>

<script lang="ts" setup>
	import { http } from '@/utils/http'
	import { useToast, useMessage, useNotify, dayjs } from 'wot-design-uni'
	import { useRouter } from '@/plugin/uni-mini-router'
	import { useUserStore } from '@/store/user'
	import avatar from './components/avatar.vue'
	import { getFileAccessHttpUrl } from '@/common/uitls'
	import { ref, onMounted } from 'vue'

	defineOptions({
		name: 'chatList',
		options: {
			styleIsolation: 'shared',
		},
	})
	const toast = useToast()
	const router = useRouter()
	const userStore = useUserStore()
	const columns = [
		{ label: '男', value: 1 },
		{ label: '女', value: 2 },
	]
	const model = reactive({
		username: userStore.userInfo.username,
		realname: userStore.userInfo.realname,
		avatar: getFileAccessHttpUrl(userStore.userInfo.avatar),
		sex: userStore.userInfo.sex ?? 1,
		phone: userStore.userInfo.phone,
		email: userStore.userInfo.email,
	})
	const rules = {
		realname: (value) => {
			if (value?.trim()?.length) {
				return true
			} else {
				toast.warning('请输入名称')
				return false
			}
		},
		phone: (value) => {
			if (value?.trim()?.length) {
				if (/^1[3-9]\d{9}$/.test(value)) {
					return true
				} else {
					toast.warning('请输入正确的手机号')
					return false
				}
			} else {
				toast.warning('请输入手机号')
				return false
			}
		},
		email: (value) => {
			if (value?.trim()?.length) {
				if (/^[a-zA-Z0-9_%+-]+(\.[a-zA-Z0-9_%+-]+)*@([a-zA-Z0-9-]+\.)+[a-zA-Z]{2,}$/.test(value)) {
					return true
				} else {
					toast.warning('请输入正确的邮箱')
					return false
				}
			} else {
				toast.warning('请输入邮箱')
				return false
			}
		},
	}
	const form = ref()

	function handleSubmit() {
		form.value
			.validate()
			.then(({ valid, errors }) => {
				if (valid) {
					if (!model.avatar) {
						toast.warning('上传头像')
						return
					}
					// toast.success('校验通过')
					const data = { ...model, id: userStore.userInfo.userid }
					delete data.username
					uni.showLoading()
					http
						.post('/sys/user/login/setting/userEdit', { ...data })
						.then((res : any) => {
							uni.hideLoading()
							if (res.success) {
								toast.success('修改成功~')
								setTimeout(() => {
									userStore.editUserInfo({ ...data })
									router.replaceAll({ name: 'people' })
								}, 1e3)
							} else {
								toast.warning(res.message)
							}
						})
						.catch(() => {
							toast.error('提交失败')
							uni.hideLoading()
						})
				}
			})
			.catch((error) => {
				console.log(error, 'error')
			})
	}
</script>

<style lang="scss" scoped>
	//
	:deep(.wd-cell-group) {
		box-sizing: border-box;
		border: 4upx solid #eff2f1;
		border-radius: 20upx;
		--wot-input-color: var(--color-grey);
		--wot-cell-value-color: var(--color-grey);
		background-color: transparent !important;
		--wot-cell-title-color: var(--UI-FG-0);

		.wd-input__label {
			--wot-cell-title-color: var(--UI-FG-0);
		}

		.wd-cell__left {
			color: var(--UI-FG-0);
		}

		.wd-select-picker__cell {
			--wot-cell-wrapper-padding: 14px;
		}

		.wd-select-picker {
			// margin: 15px 0;
		}

		.wd-cell-group__body {
			background-color: transparent;
		}
	}

	:deep(.wd-cell) {
		.wd-cell__wrapper {
			align-items: center;
		}

		.wd-cell__left {
			display: flex;
			align-items: center;
			width: 70px;
			flex: none;
		}

		.wd-cell__value {
			text-align: left;
		}
	}

	:deep(.pt3) {
		padding-top: 0;
		height: 100%;
	}

	:deep(.p5) {
		padding: 0;
		padding-top: 26upx;
	}

	.change-info-box {
		box-sizing: border-box;
		background-color: #FFF;
		padding: 26upx;
		height: 100%;
	}

	.phone {
		display: flex;
		align-items: center;
		background-color: #fff;

		.wd-input {
			flex: 1;
		}

		.box {
			margin-left: 10px;
			margin-right: 15px;
			display: flex;
			align-items: center;

			.num {
				color: #fff;
				background-color: var(--wot-color-theme);
				border-top-left-radius: 3px;
				border-bottom-left-radius: 3px;
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				padding: 0 8px;
			}

			.text {
				position: relative;
				color: var(--wot-color-theme);
				font-size: 12px;
				height: 24px;
				line-height: 24px;
				padding: 0 8px;
				border-top-right-radius: 6px;
				border-bottom-right-radius: 6px;
				min-width: 70px;

				&::before {
					content: ' ';
					width: 200%;
					height: 200%;
					position: absolute;
					top: 0;
					left: 0;
					border: 1px solid currentColor;
					-webkit-transform: scale(0.5);
					transform: scale(0.5);
					-webkit-transform-origin: 0 0;
					transform-origin: 0 0;
					box-sizing: border-box;
					border-radius: inherit;
					z-index: 1;
					pointer-events: none;
				}
			}
		}
	}
</style>